<template>
<!-- 充值 -->
 <div class="recharge">
   <header>
     <span><van-icon name="arrow-left" @click="$router.push('/layout/my/balace')"/></span>
      <h3>充值</h3>
      <span><van-icon name="ellipsis"/></span>
   </header>
   <main>
     <div class="charge">
       <span>充值方式</span>
       <h3>使用新卡充值</h3>
       <van-icon name="arrow" class="arrow" />
     </div>
    <div class="van">
         <p>充值金额</p> 
       <div class="shuru">
            <span>￥</span><input class="ipt" type="text" v-model="value" >
       </div>
     <van-number-keyboard
        :show="show"
        theme="custom"
        extra-key="."
        close-button-text="充值"
        @input="onInput"
        @delete="onDelete"
        v-model="value"
        @close='onShow'
        />
    </div>
   
   <div class="dialog" v-if="show1" @click="Close">
        <div class="tishi">
      <p>请先绑定银行卡</p>
    </div>
   </div>
   </main>
 </div>
</template>

<script>
export default {
 data(){
     return {
          show: true,
          show1:false,
          value: '',
     }
 },
 created(){

 },
 methods:{
    onInput() {
      
    },
    onDelete() {
     //console.log('删除')
    },
    onShow(){
        this.show1=true;
    },
    Close(){
    const timejump = 1;
    if(!this.timer){
      this.count = timejump ;
      this.show = false;
      this.timer = setInterval(()=>{
      if(this.count > 0 && this.count <= timejump ){
        this.count--;
      }else{
        this.show = true;
        clearInterval(this.timer);
        this.timer = null;
        //跳转的页面写在此处
       this.show1=false;
        this.$router.push('/bankCard')
      }
     },1000)
    }
    }
 },
 watch:{
   show1(){
     this.Close()
   }
 }
}

</script>
<style scoped>
.recharge{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
}
.recharge header{
    display: flex;
    height: 3.75rem;
    background-color: #51547d;
    justify-content: space-between;
    align-items: center;
    padding: 0 .9375rem;
    color:#fff;
}
.ipt{
    width: 100%;
    padding: .625rem 0;
    border: none;
    border-bottom: .0625rem solid #ccc;
}
.shuru{
    display: flex;
    margin-top: 3.125rem;
    padding: 0 1.25rem;
    font-weight: bold;
    font-size: 1.875rem;
}


.charge{
    height: 3.75rem;
    line-height: 3.75rem;
    display: flex;
    justify-content: space-between;
    background-color: #ededed;
    padding: 0 1.25rem;
}
.arrow{
    margin-top: 1.25rem;
}
.van{
    width: 100%;
    height: auto;
    border-radius: 1.25rem;
    background-color: #fff;
}
.van p{
    padding: 2.5rem 1.25rem;
    font-size: 1.25rem;
}
main{
    background-color: #fff;
}
.van-field__control{
    height: 3.125rem;
}
.tishi{
    width: 12.5rem;
    height: 12.5rem;
    background-color: #333;
    color: #fff;
    position: absolute;
    left: 50%;
    margin-left: -20%;
    top: 50%;
    margin-top: -20%;
    text-align: center;
    line-height: 12.5rem;
    border-radius: 1.875rem;
}
.dialog{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index:999
}
</style>